<template>
  <div class="preferential-zone">
    <p class="preferential-title">优惠专区</p>
    <ul class="label-card">
      <li>
        <span>限时秒杀</span>
        <div class="label-desc">
          <p>晚餐9.9元起</p>
          <p><span>{{baseHour}}点场</span><span v-if="false">限时疯抢中</span><a v-else><span>{{hour}}</span> : <span>{{minute}}</span> : <span>{{second}}</span></a></p>
        </div>
      </li>
      <li>
        <span>减免配送</span>
        <div class="label-desc">
          <p>品质店铺</p>
          <p>配送费0元起</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'PreferentialZone',
  data () {
    return {
      pollFlag: true, // 表示是否轮询
      baseHour: '',
      hour: '',
      minute: '',
      second: '',
      timerId: null
    }
  },
  methods: {
    // 倒计时的基准时间，3小时后结束，9点 12点 15点 17点 20点 23点
    getBaseTime () {
      const time = new Date()
      const hour = time.getHours()
      this.pollFlag = true
      if (hour >= 9 && hour < 12) {
        this.baseHour = 9
      } else if (hour >= 12 && hour < 15) {
        this.baseHour = 12
      } else if (hour >= 15 && hour < 17) {
        this.baseHour = 15
      } else if (hour >= 17 && hour < 20) {
        this.baseHour = 17
      } else if (hour >= 20 && hour < 23) {
        this.baseHour = 20
      } else {
        this.baseHour = 0
        this.pollFlag = false
      }
    },
    compareTime () {
      if (this.baseHour === 0) {
        this.hour = '00'
        this.minute = '00'
        this.second = '00'
        return
      }
      // 基准时间
      const date = new Date()
      // 年
      const baseY = date.getFullYear()
      // 月
      let baseMonth = (date.getMonth() + 1).toString()
      baseMonth = baseMonth.length === 1 ? baseMonth.padStart(2, '0') : baseMonth
      // 日
      let baseDay = date.getDate().toString()
      baseDay = baseDay.length === 1 ? baseDay.padStart(2, '0') : baseDay
      const now = Date.now()
      const targetTime = baseY + '-' + baseMonth + '-' + baseDay + ' ' + (this.baseHour + 3) + ':00:00:000'
      const targetMillsec = Date.parse(targetTime)
      const dateValue = targetMillsec - now
      // 计算小时数
      const hourLevel = dateValue % (24 * 60 * 60 * 1000)
      const currentHour = Math.floor(hourLevel / (60 * 60 * 1000))
      this.hour = currentHour.toString().length === 1 ? currentHour.toString().padStart(2, '0') : currentHour
      // 计算分钟数
      var minutesLevel = hourLevel % (60 * 60 * 1000)
      var minutes = Math.floor(minutesLevel / (60 * 1000))
      this.minute = minutes.toString().length === 1 ? minutes.toString().padStart(2, '0') : minutes
      // 计算秒数
      var currentSec = Math.round((minutesLevel % (60 * 1000)) / 1000)
      this.second = currentSec.toString().length === 1 ? currentSec.toString().padStart(2, '0') : currentSec
    }
  },
  mounted () {
    this.getBaseTime()
    this.compareTime()
    if (this.pollFlag) {
      this.timerId = setInterval(this.compareTime, 1000)
    }
  },
  beforeDestroy () {
    clearInterval(this.timerId)
  }
}
</script>

<style scoped lang="less">
  .preferential-zone{
    width: 100%;
    margin: 10px;
    .preferential-title{
      font-size: 25px;
      color: #000;
      width: 100%;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .label-card{
      width: 100%;
      display: flex;
      li{
        float: left;
        height: 200px;
        flex: 1;
        border-radius: 10px;
        text-align: center;
        font-size: 16px;
        position: relative;
      }
      li:nth-child(1){
        margin-right: 10px;
        background-color: pink;
        >span{
          background-color: #f40;
          padding: 5px 30px;
          border-radius: 10px;
          color: #fff;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        }
        .label-desc{
          background-color: #fff;
          text-align: center;
          position: absolute;
          bottom: 10px;
          width: 80%;
          left: 10%;
          height: 80px;
          font-size: 16px;
          padding-top: 10px;
          border-radius: 10px;
          p:nth-child(1){
            font-size: 18px;
            font-weight: 700;
            color: #000;
            margin-bottom: 10px;
          }
          p:nth-child(2){
            span{
              // line-height: 20px;
              color: #f40;
              padding-right: 5px;
              margin-bottom: 10px;
            }
            a{
              span{
                background-color: #f40;
                padding-left: 4px;
                color: #fff;
                border-radius: 10px;
              }
            }
          }
        }
      }
      li:nth-child(2){
        margin-right: 20px;
        background-color: skyblue;
        >span{
          background-color: black;
          padding: 5px 30px;
          border-radius: 10px;
          color: #fff;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        }
         .label-desc{
          background-color: #fff;
          text-align: center;
          position: absolute;
          bottom: 10px;
          width: 80%;
          left: 10%;
          height: 80px;
          font-size: 16px;
          padding-top: 10px;
          border-radius: 10px;
          p:nth-child(1){
            font-size: 18px;
            font-weight: 700;
            color: #000;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
</style>
